import React from 'react'
import PropTypes from 'prop-types'
import { routerRedux } from 'dva/router'
import { connect } from 'dva'
import { Row, Col, Button, Popconfirm } from 'antd'
import { Page } from 'components'
import queryString from 'query-string'
import List from './List'
import Filter from './Filter'
import Modal from './Modal'


const Menu = ({ location, dispatch, dashboard, menu, loading }) => {
  location.query = queryString.parse(location.search)
  const { list, currentItem, modalVisible, modalType,  selectedRowKeys } = menu
  const { roleOptionData, departmentOptionData } = dashboard
  const optionData = {
    roleData: roleOptionData,
    departmentData: departmentOptionData,
  }
  const modalProps = {
    item: modalType === 'create' ? { PARENT_ID: currentItem.ID||0 } : currentItem,
    visible: modalVisible,
    optiondata: optionData,
    maskClosable: false,
    confirmLoading: loading.effects['menu/update'],
    title: `${modalType === 'create' ? 'create new menu' : 'update menu'}`,
    wrapClassName: 'vertical-center-modal',
    onOk (data) {
      // dispatch({
      //   type: `menu/${modalType}`,
      //   payload: data,
      // })
    },
    onCancel () {
      dispatch({
        type: 'menu/hideModal',
      })
    },
  }

  const listProps = {
    dataSource: list,
    pagination: false,
    loading: loading.effects['menu/query'],
    location,
    onDeleteItem (id) {
      dispatch({
        type: 'menu/delete',
        payload: id,
      })
    },
    onEditItem (item) {
      dispatch({
        type: 'menu/showDetail',
        payload: {
          modalType: 'update',
          currentItem: item,
        },
      })
    },
    onAdd (item) {
      dispatch({
        type: 'menu/updateModalState',
        payload: {
          modalType: 'create',
          currentItem: item,
        },
      })
    },
    rowSelection: {
      selectedRowKeys,
      onChange: (keys) => {
        dispatch({
          type: 'menu/updateState',
          payload: {
            selectedRowKeys: keys,
          },
        })
      },
    },
  }

  const filterProps = {
    optiondata: optionData,
    filter: {
      ...location.query,
    },
    onAdd () {
      dispatch({
        type: 'menu/updateModalState',
        payload: {
          modalType: 'create',
          currentItem: {},
        },
      })
    },
  }

  const handleDeleteItems = () => {
    dispatch({
      type: 'menu/multiDelete',
      payload: {
        ids: selectedRowKeys,
      },
    })
  }

  return (
    <Page inner>
      <Filter {...filterProps} />
      {
        selectedRowKeys.length > 0 &&
        <Row style={{ marginBottom: 24, textAlign: 'right', fontSize: 13 }}>
          <Col>
            {`Selected ${selectedRowKeys.length} items `}
            <Popconfirm title={'Are you sure delete these items?'} placement="left" onConfirm={handleDeleteItems}>
              <Button type="primary" size="large" style={{ marginLeft: 8 }}>Remove</Button>
            </Popconfirm>
          </Col>
        </Row>
      }
      <List {...listProps} />
      {modalVisible && <Modal {...modalProps} />}
    </Page>
  )
}

Menu.propTypes = {
  menu: PropTypes.object,
  dashboard: PropTypes.object,
  location: PropTypes.object,
  dispatch: PropTypes.func,
  loading: PropTypes.object,
}

export default connect(({ menu, dashboard, loading }) => ({ menu, dashboard, loading }))(Menu)
